import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,ScrollView
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';;
import {width, height} from '../../common/common';
import TextComp from '../../component/TextComp'
export default class UseGuide extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:navigation.getParam('title'),
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
     
    })
  }
  title(title){
    const style = {
      fontSize: 16,
      fontWeight: 'bold',
      padding:4
    }
    return(<Text style={style}>{title}</Text>)
  }
  blueTitle(title){
    const style = {
      fontSize: 15,
      fontWeight: 'bold',
      padding:4,
      color: '#2596ff'
    }
    return(<Text style={style}>{title}</Text>)
  }
  blankView(){
    return(<View style={{height:90}}></View>)
  }
  content(text){
    const style = {
      fontSize: 13,
      padding:4
    }
    return(<Text style={style}>{text}</Text>)
  }
  getImage(height, img){
    const imageStyle = {
      width: width-20,
      height: height,
    }
    return(
      <Image style={imageStyle} resizeMode='contain' source={img} />
    )
  }
  tempGuide(){ //模板
    return(
      <View>
        {this.title('模板页介绍')}
        {this.content('点击底部【模板按钮】，跳转到模板页，可以通过分类选择模板。')}
        {this.blankView()}
        {this.blueTitle('搜索模板')}
        {this.content('在搜索框中输入搜索关键字-点击【搜索】按钮，即可搜索需要的模板。')}
        {this.blankView()}
        {this.blueTitle('使用/收藏/分享模板')}
        {this.content('选择模板，进入预览页，点击【使用】按钮，即可使用该模板；点击【收藏】按钮，即可收藏该模板；点击【分享】按钮，即可分享给好友该模板。')}
        {this.blankView()}
        {this.blueTitle('创建空白模板')}
        {this.content('点击下方【模板】按钮，进入模板界面，点击【创建空白模板】按钮，即可创建空白模板。')}
        {this.blankView()}
      </View>
    )
  }
  textGuide(){ //文字
    return(
      <View>
        {this.title('文字工具的使用')}
        {this.blueTitle('更改文字')}
        {this.content('编辑页右侧工具模块中，点击【文字】按钮，切换文字编辑模式-在编辑模块即可编辑文字。')}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_text.png'))}
        {this.blueTitle('删除文字')}
        {this.content('在编辑页最下方编辑模块中，选中文字-删除文字内容，即可删除文字，文本框为空。')}
      </View>
    )
  }
  imageGuide(){ //图片
    return(
      <View>
        {this.title('更改图片功能')}
        {this.content('点击编辑界面右侧工具模块【图片】按钮，进入图片库，选择更改图片。')}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_img1.png'))}
        {this.blueTitle('素材更改')}
        {this.content('点击【素材】-选择更改图片-点击【确定】按钮，即可添加图片。')}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_img2.png'))}
        {this.blueTitle('背景更改')}
        {this.content('背景更改同素材更改。')}
        {this.blueTitle('我的图片更改')}
        {this.content('我的图片更改同素材更改。')}
      </View>
    )
  }
  imageDelGuide(){
    return(
      <View>
        {this.title('删除图片功能')}
        {this.content('点击编辑界面右侧工具模块【图片】按钮，进入图片库-点击【我的图片】-选择【我的素材】/【我的背景】-点击图片下方【删除】按钮，即可删除图片。')}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_del_img.png'))}
      </View>
    )
  }
  musicGuide(){
    return(
      <View>
        {this.title('音乐功能')}
        {this.blueTitle('更换背景音乐')}
        {this.content('点击编辑界面右侧工具模块【音乐】按钮，进入音乐库-点击【曲库】-点击图片下方【确认】按钮，即可更换背景音乐。')}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_music1.png'))}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_music2.png'))}
      </View>
    )
  }
  musicDelGuide(){
    return(
      <View>
        {this.title('音乐功能')}
        {this.blueTitle('删除我的音乐')}
        {this.content('点击编辑界面右侧工具模块【音乐】按钮，进入音乐库-点击【我的音乐】-选择【我的音乐】-点击图片下方【删除】按钮，即可删除音乐。')}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_music1.png'))}
        {this.getImage((width-20)*0.56, require('../../images/mine/guide_del_music.png'))}
      </View>
    )
  }
  render(){
    let type = this.props.navigation.getParam('type')
    let content;
    if(type == 't1'){
      content = this.tempGuide();
    } else if (type == 't3'){
      content = this.textGuide();
    } else if (type == 't4'){
      content = this.imageGuide();
    } else if (type == 'c1'){
      content = this.imageDelGuide();
    } else if (type == 'c2'){
      content = this.musicGuide();
    } else if (type == 'c3'){
      content = this.musicDelGuide();
    }
    return(

      <ScrollView style={{flex:1,padding:10}}>
        <View style={{flex:1,marginBottom:20}}>
          <TextComp/>
          {content}
        </View>
      </ScrollView>
    )
  }
}
const styles = StyleSheet.create({
  
})